<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="registerHtml">
<head>
    <meta charset="utf-8">
    <title>在线考试系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/static/css/login.css" media="all"/>
    <link rel="stylesheet" href="/static/css/bootstrapValidator.min.css" media="all"/>
    <link rel="stylesheet" href="/static/css/bootstrap.css" media="all"/>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/register.js"></script>
    <script type="text/javascript" src="/static/js/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap-paginator.js"></script>
    <style>
        .emailCode {
            position: absolute;
            right: 0px;
            top: 1px;
            height: 32px;
            width: 80px;
            background: #00a1d6;
            color: white;
            border-radius: 5px;
            border: 1px solid #00a1d6;;
        }
        .emailCode:hover{
            background: rgba(0,161,214,0.8);
        }
        .layui-input.layui-unselect{
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div id="bg-body"></div>
<div class="register">
    <h1 style="width: 260px">在线考试系统学生注册</h1>
    <form id="frmRegister" class="layui-form" action="register" method="post" style="width: 260px">
        <div class="layui-form-item form-group">
            <input class="layui-input form-control" name="name" placeholder="请输入用户名"
                   type="text"
                   autocomplete="off">
        </div>
        <div class="layui-form-item form-group">
            <input class="layui-input form-control" name="password" id="password" placeholder="请输入密码"
                   type="password"
                   autocomplete="off">
        </div>
        <div class="layui-form-item form-group">
            <input class="layui-input form-control" name="rePassword" id="password1" placeholder="确认密码"
                   type="password"
                   autocomplete="off">
        </div>
        <div class="layui-form-item form-group">
            <input class="layui-input form-control" name="phone" placeholder="请输入手机号码" lay-verify="required"
                   type="text" maxlength="11">
        </div>
        <div class="layui-form-item form-group">
            <input class="layui-input form-control" name="email" placeholder="请输入邮箱" lay-verify="required"
                   type="text" maxlength="50">
        </div>
        <div  class="layui-form-item form-group" style="position:relative">
            <input id="yzm" class="layui-input form-control" name="emailCode" placeholder="请输入验证码" lay-verify="required"
                   type="text" maxlength="50">
            <button onclick="getCode()" type="button" class="emailCode"><span>点击获取</span></button>
        </div>
        <div class="layui-form-item form-group">
            <select name="identityId">
                <option value="10000">学员注册</option>
                <option value="10001">教员注册</option>
            </select>
        </div>
        <div class="layui-form-item form-group">
            <input type="button" class="layui-btn fa-registered" value="去登录" onclick="toLogin()"/>
            <input type="submit" class="layui-btn fa-registered" style="margin-left: 112px" value="注册"/>
        </div>
    </form>
</div>

<script>
    $(function () {
        layui.use("layer", function () {
            var layer = layui.layer;
            var msg = "${registerErrorMsg}";
            if (msg.length > 0){
                layer.msg(msg,{time:2000});
            }
        });

        $('#frmRegister').bootstrapValidator({
            feedbackIcons: {},
            trigger: "blur",
            fields: {
                name: {
                    validators: {
                        notEmpty: {message: '用户名不得为空!'},
                        stringLength: {
                            min: 2,
                            max: 10,
                            message: '用户名必须大于2小于10'
                        }
                    }

                },
                password: {
                    validators: {
                        notEmpty: {message: '密码不得为空!'},
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码必须大于6小于18'
                        }
                    }
                },
                rePassword: {
                    validators: {
                        identical: {
                            field: "password",
                            message: '两次输入密码不一致'
                        }
                    }

                },
                phone: {
                    validators: {
                        regexp: {
                            regexp: /^1\d{10}$/,
                            message: '请输入正确的11位手机号'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: "邮箱不能为空"
                        },
                        emailAddress: {
                            message: '请输入正确的邮箱地址'
                        },
                        remote: {
                            type: "post",
                            url: "email/checkEmail",
                            message: "该邮箱已被注册",
                            data: {
                                identityId: function () {
                                    return $("select[name=identityId]").val();
                                }
                            }
                        }
                    }
                },
                emailCode: {
                    validators: {
                        remote:{
                            type: "post",
                            url: "email/checkEmailCode",
                            message: "验证码错误或以失效"
                        }
                    }
                }
            }
        });
    });

    function toLogin() {
        window.location.href = "/showLogin";
    }

    function getCode() {
        var email= $("[name=email]").val();
        if (email != ''){
            $.ajax({
                type: "GET",
                url: "email/sendEmail?receiveMailAccount=" + email,
                success: function (msg) {
                    if (msg.success) {
                        layer.msg("验证码已发送请注意接收",{time: 2000})
                    }
                    else {
                        layer.msg("邮件发送失败，原因是："+msg.errorMsg,{time:2000,skin:"errorMsg"})
                    }
                }
            });
        } else {
            layer.msg("请先填写邮箱",{time:2000,skin:"errorMsg"})
        }
    }
</script>
</body>
</html>